import { useState, useMemo, useEffect } from 'react';
import { PlusCircleOutlined, CloseCircleFilled } from '@ant-design/icons';
import MemberSelectCore, { tabsData, getMemberIconByKey } from '@inbiz/basic/MemberSelect';
import { addMemberKey } from '../../utils';
import './style.less';

export default function MemberSelector(props: any) {
    const { config, type, value, onChange } = props;
    const [memberVisiable, setMemberVisiable] = useState(false);
    const [memberData, setMemberData] = useState(value ? typeof value == 'string' ? addMemberKey(JSON.parse(value)) : addMemberKey(value) : []);

    const tabs = useMemo(() => {
        if (type && (type == 'department' || type == 'position' || type == 'group' || type == 'user')) {
            return tabsData?.filter((item) => item?.memberKey == type)
        } else {
            return tabsData;
        };
    }, [type, tabsData]);

    const onDelete = (item: any) => {
        let _memberData = memberData?.filter((item1: any) => item1?.id != item?.id);
        onChange(_memberData);
    };

    useEffect(() => {
        setMemberData(value ? typeof value == 'string' ? addMemberKey(JSON.parse(value)) : addMemberKey(value) : []);
    }, [value]);

    return (
        <>
            <div className='process-designer-member-select-wrapper'>
                <div className='process-designer-member-select-members' style={{ paddingTop: config?.multiple === false ? 0 : 4 }}>
                    {
                        config?.multiple === false
                            ?
                            (memberData?.length > 0
                                &&
                                <div className='process-designer-member-select-members-single'>
                                    <div className='process-designer-member-select-members-single-content'>
                                        {getMemberIconByKey(memberData?.[0]?.key?.split('-')[0])}
                                        {memberData?.[0]?.name}
                                    </div>
                                    <div className='process-designer-member-select-members-single-icon'>
                                        <CloseCircleFilled onClick={() => { onDelete(memberData?.[0]) }} />
                                    </div>
                                </div>)
                            :
                            memberData?.map((item: any) => {
                                return (
                                    <MemberItem key={item?.id} data={item} onDelete={onDelete} />
                                )
                            })
                    }
                </div>
                <div className='process-designer-member-select-icon'>
                    <PlusCircleOutlined onClick={() => { setMemberVisiable(true) }} />
                </div>
            </div>
            <MemberSelectCore
                visible={memberVisiable}
                config={{
                    ...config,
                    tabs,
                    selected: memberData,
                    onCancel: () => {
                        setMemberVisiable(false);
                    },
                    onOk: (keys, rows, map) => {
                        onChange(rows);
                        setMemberData(rows);
                        setMemberVisiable(false);
                    },
                }}
            />
        </>
    )
};

function MemberItem(props: { data: any; onDelete: any; }) {
    const { data, onDelete } = props;

    return (
        <div className='process-designer-member-select-member'>
            {getMemberIconByKey(data.key?.split('-')[0])}
            <div>{data?.name}</div>
            <CloseCircleFilled onClick={() => { onDelete(data) }} />
        </div>
    )
}